<template>
	<div class="mainos">
		<div class="main_spac1" style="padding-bottom: 5px">
			<div class="main_white padding10">
				<el-form
					:inline="true"
					:rules="rules"
					:model="monitorForm"
					class="demo-form-inline marginTop0"
					ref="userListFrom"
					label-width="60px"
				>
					<div class="main_crumbs boxdq">
						<div class="main_crumbs_l">
							<a href="javascript:;" @click="$router.back(-1)">
								<i class="el-icon-arrow-down"></i>返回
							</a>
							<em>|</em>
							<span>对账</span>
						</div>
					</div>
					<div class="main_tile boxdq marginTop10">
						<div class="main_tile_l marginLeft0"><em></em>基础信息</div>
					</div>
					<div class="main_xq" v-if="info.info.type == 1">
						<ul class="boxha">
							<li>
								采购单号：<span>{{ info.info.related_order_sn }}</span>
							</li>
							<li>
								采购日期：<span>{{
									parseTime(info.info.purchase_time, "{y}-{m}-{d}")
								}}</span>
							</li>
							<li>
								采购方式：<span>{{ info.modeList[info.info.mode] }}</span>
							</li>
							<li>
								采购员/供应商：<span>{{ info.info.buyerAndSupplier }}</span>
							</li>
							<li class="boxnr">
								对账单号：<span>{{ info.info.order_sn }}</span>
							</li>
							<li class="boxnr">
								采购金额：<span>{{ info.info.money_all }}</span>
							</li>
							<li class="boxnr">
								对账金额：
								<span class="main_xqs">
									<el-input
										v-model.trim="total.hj"
										placeholder="对账金额"
										:disabled="true"
										clearable
									></el-input>
								</span>
							</li>
							<li class="boxnr">
								差异金额：
								<span class="main_xqs">
									<el-input
										v-model.trim="total.ce"
										placeholder="差异金额"
										:disabled="true"
										clearable
									></el-input>
								</span>
							</li>
							<li>
								对账状态：<span>{{
									info.account_status_list[info.info.account_status]
								}}</span>
							</li>
							<li>
								结算状态：<span>{{ info.statusList[info.info.status] }}</span>
							</li>
							<li class="main_w100">
								备注：<span>{{ info.info.remark }}</span>
							</li>
						</ul>
					</div>
					<div class="main_xq" v-else>
						<ul class="boxha">
							<li>
								退货单号：<span>{{ info.info.related_order_sn }}</span>
							</li>
							<li>
								退货日期：<span>{{
									parseTime(info.info.purchase_time, "{y}-{m}-{d}")
								}}</span>
							</li>
							<li>
								采购方式：<span>{{ info.modeList[info.info.mode] }}</span>
							</li>
							<li>
								采购员/供应商：<span>{{
									info.info.mode == 1
										? info.buyer[info.info.buyer_id]
										: info.supplier[info.info.supplier_id]
								}}</span>
							</li>
							<li class="boxnr">
								对账单号：<span>{{ info.info.order_sn }}</span>
							</li>
							<li class="boxnr">
								退货金额：<span>{{ info.info.money_all }}</span>
							</li>
							<li class="boxnr">
								对账金额：
								<span class="main_xqs">
									<el-input
										v-model.trim="total.dz"
										placeholder="对账金额"
										:disabled="true"
										clearable
									></el-input>
								</span>
							</li>
							<li class="boxnr">
								差异金额：
								<span class="main_xqs">
									<el-input
										v-model.trim="total.ce"
										placeholder="差异金额"
										:disabled="true"
										clearable
									></el-input>
								</span>
							</li>
							<li>
								对账状态：<span>{{
									info.account_status_list[info.info.account_status]
								}}</span>
							</li>
							<li>
								结算状态：<span>{{ info.statusList[info.info.status] }}</span>
							</li>
							<li class="main_w100">
								备注：<span>{{ info.info.remark }}</span>
							</li>
						</ul>
					</div>
					<div class="main_tile boxdq marginTop15">
						<div class="main_tile_l marginLeft0"><em></em>商品详情</div>
					</div>
					<div class="main_white marginBottom10" v-if="info.info.type == 1">
						<div class="main_white">
							<div class="main_table marginTop0">
								<el-table
									ref="multipleTable"
									:data="monitorForm.list"
									element-loading-text="加载中"
									fit
									border
									highlight-current-row
								>
									<el-table-column label="序号">
										<template slot-scope="scope">{{
											scope.$index + 1
										}}</template>
									</el-table-column>
									<el-table-column label="商品名称" prop="name" width="150">
										<template slot-scope="scope"
											>{{ scope.row.goods.name }}【{{
												scope.row.goods_spu.spu_name.title
											}}】</template
										>
									</el-table-column>
									<el-table-column
										label="单位"
										prop="goods_spu.spu_unit.title"
									/>
									<el-table-column label="采购数量" prop="num" width="150" />
									<el-table-column
										label="采购单价"
										prop="price"
										width="150"
										class-name="main_hei"
									/>
									<el-table-column
										label="采购金额"
										prop=""
										width="150"
										class-name="main_hei"
									>
										<template slot-scope="scope">{{
											(parseFloat(scope.row.price) * parseFloat(scope.row.num))
												| twoPlace
										}}</template>
									</el-table-column>
									<el-table-column
										label="对账数量"
										prop="account_num"
										width="150"
										class-name="main_hei"
									>
										<template slot-scope="scope">
											<el-form-item
												:prop="'list.' + scope.$index + '.account_num'"
												:rules="rules.account_num"
												label-width="10px"
												label=" "
											>
												<el-input
													v-model.trim="scope.row.account_num"
													placeholder="对账数量"
													class="wid110"
													@change="isEdit = true"
												></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column
										label="对账单价"
										prop="account_price"
										width="150"
										class-name="main_hei"
									>
										<template slot-scope="scope">
											<el-form-item
												:prop="'list.' + scope.$index + '.account_price'"
												:rules="rules.account_price"
												label-width="10px"
												label=" "
											>
												<el-input
													v-model.trim="scope.row.account_price"
													placeholder="对账单价"
													class="wid110"
													@change="isEdit = true"
												></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column
										label="对账金额"
										prop="account_money"
										width="150"
										class-name="main_hei"
									>
										<template slot-scope="scope">
											<el-form-item
												:prop="'list.' + scope.$index + '.account_money'"
												:rules="rules.account_money"
												label-width="10px"
												label=" "
											>
												<el-input
													v-model.trim="scope.row.account_money"
													placeholder="对账金额"
													class="wid110"
													@change="isEdit = true"
												></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column
										label="差异数量"
										prop=""
										width="120"
										class-name="main_hei"
									>
										<template slot-scope="scope">
											{{
												parseFloat(scope.row.num) -
												parseFloat(scope.row.account_num)
													? $toFixed(
															parseFloat(scope.row.num) -
																parseFloat(scope.row.account_num)
													  )
													: "0.00"
											}}
										</template>
									</el-table-column>
									<el-table-column
										label="差异单价"
										prop=""
										width="120"
										class-name="main_hei"
									>
										<template slot-scope="scope">
											{{
												parseFloat(scope.row.price) -
												parseFloat(scope.row.account_price)
													? $toFixed(
															parseFloat(scope.row.price) -
																parseFloat(scope.row.account_price)
													  )
													: "0.00"
											}}
										</template>
									</el-table-column>
									<el-table-column
										label="差异金额"
										prop=""
										width="120"
										class-name="main_hei"
									>
										<template slot-scope="scope">
											{{
												$toFixed(
													parseFloat(
														$toFixed(
															parseFloat(scope.row.price) *
																parseFloat(scope.row.num)
														)
													) - parseFloat(scope.row.account_money)
												)
											}}
										</template>
									</el-table-column>
									<el-table-column
										label="备注"
										prop="remark"
										width="350"
										class-name="main_hei"
									>
										<template slot-scope="scope">
											<el-form-item label-width="0" label="">
												<el-input
													v-model.trim="scope.row.remark"
													placeholder="备注"
													class="wid240"
													@change="isEdit = true"
												></el-input>
											</el-form-item>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</div>
					</div>
					<div class="main_white marginBottom10" v-else>
						<div class="main_white">
							<div class="main_table marginTop0">
								<el-table
									ref="multipleTable"
									:data="monitorForm.list"
									element-loading-text="加载中"
									fit
									border
									highlight-current-row
								>
									<el-table-column label="序号">
										<template slot-scope="scope">{{
											scope.$index + 1
										}}</template>
									</el-table-column>
									<!-- <el-table-column label="入库单号" width="150" prop="order_sn" /> -->
									<el-table-column label="商品名称" prop="name" width="150">
										<template slot-scope="scope"
											>{{ scope.row.goods.name }}【{{
												scope.row.goods_spu.spu_name.title
											}}】</template
										>
									</el-table-column>
									<el-table-column
										label="单位"
										prop="goods_spu.spu_unit.title"
									/>
									<el-table-column label="退货数量" prop="num" width="150" />
									<el-table-column
										label="退货单价"
										prop="price"
										width="150"
										class-name="main_hei"
									/>
									<el-table-column
										label="退货金额"
										prop=""
										width="150"
										class-name="main_hei"
									>
										<template slot-scope="scope">{{
											(parseFloat(scope.row.price) * parseFloat(scope.row.num))
												| twoPlace
										}}</template>
									</el-table-column>
									<el-table-column
										label="对账数量"
										prop="account_num"
										width="150"
										class-name="main_hei"
									>
										<template slot-scope="scope">
											<el-form-item
												:prop="'list.' + scope.$index + '.account_num'"
												:rules="rules.account_num"
												label-width="10px"
												label=" "
											>
												<el-input
													v-model.trim="scope.row.account_num"
													placeholder="对账数量"
													@input="(val) => inputchnage(val, scope, 1)"
													class="wid110"
												></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column
										label="对账单价"
										prop="account_price"
										width="150"
										class-name="main_hei"
									>
										<template slot-scope="scope">
											<el-form-item
												:prop="'list.' + scope.$index + '.account_price'"
												:rules="rules.account_price"
												label-width="10px"
												label=" "
											>
												<el-input
													v-model.trim="scope.row.account_price"
													placeholder="对账单价"
													@input="(val) => inputchnage(val, scope, 2)"
													class="wid110"
												></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column
										label="对账金额"
										prop="market_price"
										width="150"
										class-name="main_hei"
									>
										<template slot-scope="scope">
											<el-form-item
												:prop="'list.' + scope.$index + '.account_money'"
												:rules="rules.account_money"
												label-width="10px"
												label=" "
											>
												<el-input
													v-model.trim="scope.row.account_money"
													placeholder="对账金额"
													class="wid110"
													@change="isEdit = true"
												></el-input>
											</el-form-item>
											<!-- {{
                        parseFloat(scope.row.account_num) *
                        parseFloat(scope.row.account_price)
                          ? (
                              parseFloat(scope.row.account_num) *
                              parseFloat(scope.row.account_price)
                            ).toFixed(2)
                          : 0.0
                      }} -->
										</template>
									</el-table-column>
									<el-table-column
										label="差异数量"
										prop=""
										width="120"
										class-name="main_hei"
									>
										<template slot-scope="scope">
											{{
												parseFloat(scope.row.num) -
												parseFloat(scope.row.account_num)
													? $toFixed(
															parseFloat(scope.row.num) -
																parseFloat(scope.row.account_num)
													  )
													: "0.00"
											}}
										</template>
									</el-table-column>
									<el-table-column
										label="差异单价"
										prop="un_account_num"
										width="120"
										class-name="main_hei"
									>
										<template slot-scope="scope">
											{{
												parseFloat(scope.row.price) -
												parseFloat(scope.row.account_price)
													? $toFixed(
															parseFloat(scope.row.price) -
																parseFloat(scope.row.account_price)
													  )
													: "0.00"
											}}
										</template>
									</el-table-column>
									<el-table-column
										label="差异金额"
										prop=""
										width="120"
										class-name="main_hei"
									>
										<template slot-scope="scope">
											{{
												parseFloat(scope.row.price) *
													parseFloat(scope.row.num) -
												parseFloat(scope.row.account_price) *
													parseFloat(scope.row.account_num)
													? $toFixed(
															parseFloat(scope.row.price) *
																parseFloat(scope.row.num) -
																parseFloat(scope.row.account_price) *
																	parseFloat(scope.row.account_num)
													  )
													: "0.00"
											}}
										</template>
									</el-table-column>
									<el-table-column
										label="备注"
										prop="remark"
										width="350"
										class-name="main_hei"
									>
										<template slot-scope="scope">
											<el-form-item label-width="0" label="">
												<el-input
													v-model.trim="scope.row.remark"
													placeholder="备注"
													class="wid240"
													@change="isEdit = true"
												></el-input>
											</el-form-item>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</div>
					</div>
					<div class="main_tile boxdq marginTop10">
						<div class="main_tile_l marginLeft0"><em></em>其他</div>
					</div>
					<div class="main_xq">
						<ul class="boxha">
							<li
								class="main_w100 box marginTop15 marginBottom15"
								v-for="(other_list, index) in monitorForm.other_list"
								:key="index"
							>
								<p class="base_p">{{ index == 0 ? "其他费用：" : "" }}</p>
								<div class="box main_xqi" style="margin-top: -4px">
									<el-input
										v-model.trim="other_list.descr"
										placeholder="描述"
										clearable
										class="wid240"
									></el-input>
									<el-input
										v-model.trim="other_list.money"
										placeholder="金额"
										clearable
										class="wid140 marginLeft15"
									></el-input>
								</div>
							</li>
							<li class="main_w100">
								合计：<span>{{ total.hj }}</span>
							</li>
							<li class="main_w100 box marginTop20">
								备注：
								<div class="box main_xqi" style="margin-top: -4px">
									<el-input
										v-model.trim="monitorForm.form.remark"
										placeholder="备注"
										clearable
										style="width: 60%"
										@change="isEdit = true"
									></el-input>
								</div>
							</li>
							<li class="main_w100 box marginTop20">
								显示相关凭证：
								<div class="box main_xqi">
									<div
										class="main_xqi_i marginRight10"
										v-for="(pics, index) in info.info.pics"
										:key="index"
									>
										<label
											class="el-upload-list__item-status-label"
											v-if="pics.includes(info.info.pic)"
										>
											<i class="el-icon-upload-success el-icon-check"></i>
										</label>
										<el-image
											fit="fill"
											:src="pics"
											:preview-src-list="info.info.pics"
										>
											<div slot="error" class="image-slot">
												<img :src="puzzleImg" />
											</div>
										</el-image>
									</div>
								</div>
							</li>
						</ul>
					</div>

					<div class="newConBox_p200 paddingBottom10" id="newConBox">
						<div class="newConBox_h32">
							<div
								:class="['mainor_pr boxdq newConBox ', { on: searchBarFixed }]"
							>
								<div class="mainor_prl">
									<el-button type="primary" @click="preservation" v-repeatClick
										>保存</el-button
									>
									<el-button @click="$router.back(-1)">取消</el-button>
								</div>
							</div>
						</div>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	const shuju = {
		other_list: {
			descr: "",
			money: "",
		},
	};

	import { mapGetters } from "vuex";
	import {
		account_info,
		account_account,
	} from "@/api/financial/financialRecharge";
	import { apiUrl, objKeySort, Md5 } from "@/utils/public";
	import rules from "@/rules/financial/financialRecharge_record";
	import { parseTime } from "@/utils/index";
	import { puzzleImg } from "@/api/currency";

	export default {
		computed: {
			...mapGetters(["avatar"]),
			total() {
				let sz = 0;
				let dz = 0;
				let ce = 0;
				// 其他费用
				this.monitorForm.other_list.forEach((e) => {
					sz += parseFloat(e.money) ? parseFloat(e.money) : 0;
				});
				this.monitorForm.list.forEach((e) => {
					dz += parseFloat(this.$toFixed(parseFloat(e.account_money)));
					ce += parseFloat(
						this.$toFixed(
							parseFloat(e.price) * parseFloat(e.num) -
								parseFloat(e.account_money)
						)
					);
				});
				dz = dz ? this.$toFixed(dz) : "0.00";
				ce = ce ? this.$toFixed(ce) : "0.00";
				let hj =
					parseFloat(dz) + sz ? this.$toFixed(parseFloat(dz) + sz) : "0.00";

				return { dz, ce, hj };
			},
		},
		components: {},

		data() {
			return {
				// 验证
				rules,
				// 时间
				parseTime,
				// 基本信息
				info: {
					info: {
						pics: [],
						money: 0,
						purchase_time: "2000-01-01",
						type: 1,
						status: 0,
						mode: 0,
						account_statement_list: [],
					},
					buyer: ["未分拣"],
					modeList: ["未分拣"],
					supplier: ["未分拣"],
					typeList: ["未分拣"],
					account_status_list: ["未分拣"],
					statusList: ["未分拣"],
				},
				puzzleImg,
				listLoading: false,
				// 列表数据
				monitorForm: {
					form: {
						remark: "",
					},
					list: [],
					other_list: [],
				},
				// 商品搜索
				formsp: {
					value: "",
				},
				// id
				id: this.$route.params.id,
				// 监听滚动
				searchBarFixed: false,
				isEdit: false,
			};
		},
		mounted() {
			window.addEventListener("scroll", this.handleScroll);
		},
		destroyed() {
			window.removeEventListener("scroll", this.handleScroll);
		},
		created() {
			// 基本信息
			this.account_info();
		},

		beforeRouteLeave(to, from, next) {
			if (this.isEdit) {
				setTimeout(() => {
					this.$confirm(
						"您已经有数据操作，离开页面系统不会保存您的操作，确定离开吗？",
						"提示",
						{
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning",
						}
					)
						.then(() => {
							// 正常跳转
							next();
						})
						.catch(() => {
							next(false);
						});
				}, 200);
			} else {
				next();
			}
		},
		methods: {
			// 监听滚动
			handleScroll() {
				let scrollTop =
					window.pageYOffset ||
					document.documentElement.scrollTop ||
					document.body.scrollTop;
				scrollTop + document.documentElement.clientHeight >
				document.getElementById("newConBox").offsetTop + 300
					? (this.searchBarFixed = false)
					: (this.searchBarFixed = true);
			},
			// 其他
			plus() {
				let other_list = JSON.parse(JSON.stringify(shuju.other_list));
				this.monitorForm.other_list.push(other_list);
			},
			reduce(index) {
				this.monitorForm.other_list.splice(index, 1);
			},
			// 对账数量，对账单价修改
			inputchnage(val, scope, type) {
				if (!/^-?\d*\.?\d*$/.test(val)) {
					this.$message.error("请输入数字");
					return;
				}
				if (type == 1 && scope.row.account_price && val) {
					scope.row.account_money = this.$toFixed(
						parseFloat(scope.row.account_price) *
							parseFloat(scope.row.account_num)
					);
				} else if (type == 2 && scope.row.account_num && val) {
					scope.row.account_money = this.$toFixed(
						parseFloat(scope.row.account_price) *
							parseFloat(scope.row.account_num)
					);
				}
			},
			// 删除
			scdelete(index, type) {
				this.monitorForm.list.splice(index, 1);
			},
			// 保存
			preservation() {
				this.$refs["userListFrom"].validate((valid) => {
					if (valid) {
						let num = 0;
						let arry = [];
						let monitorForm = JSON.parse(JSON.stringify(this.monitorForm));
						// monitorForm.list.map((e) => {
						//   if (
						//     parseFloat(e.account_num) > 0 &&
						//     parseFloat(e.account_price) == 0
						//   ) {
						//     num++;
						//   }
						//   if (
						//     parseFloat(e.account_num) == 0 &&
						//     parseFloat(e.account_price) > 0
						//   ) {
						//     num++;
						//   }
						// });
						// if (num > 0) {
						//   this.$message.error("请输入数量和单价大于0或者都不输入");
						//   return;
						// }
						monitorForm.list.map((e) => {
							arry.push({
								remark: e.remark,
								account_num: e.account_num,
								account_price: e.account_price,
								account_money: e.account_money,
								id: e.id,
							});
						});
						let data = Object.assign(
							{
								sign: Md5(
									objKeySort(Object.assign(apiUrl().name, { id: this.id })) +
										apiUrl().appsecret
								),
							},
							apiUrl().name,
							monitorForm.form,
							{
								list: JSON.stringify(arry),
								other_money: JSON.stringify(monitorForm.other_list),
								id: this.id,
							}
						);
						account_account(data).then((res) => {
							if (res.errcode == 0) {
								this.$message({
									message: "保存成功",
									type: "success",
								});
								this.isEdit = false;
								this.$router.go(-1);
							} else {
								this.$message.error(res.errmsg);
							}
						});
					}
				});
			},
			// 基本信息
			account_info() {
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name, { id: this.id })) +
								apiUrl().appsecret
						),
					},
					apiUrl().name,
					{ id: this.id }
				);
				account_info(data).then((res) => {
					if (res.errcode == 0) {
						if (res.data.info.other_money) {
							this.monitorForm.other_list = JSON.parse(
								res.data.info.other_money.split(",")
							);
						}
						if (res.data.info.pics) {
							res.data.info.pics = res.data.info.pics
								.split(",")
								.map((p) => this.avatar.domain + p);
						}
						this.monitorForm.list = res.data.info.account_statement_list;
						this.info = res.data;
						this.info.info.buyerAndSupplier = this.buyerAndSupplierTable();
					} else {
						this.$message.error(res.errmsg);
					}
				});
			},
			buyerAndSupplierTable() {
				let flag = null;
				let info = this.info;
				try {
					switch (info.info.mode) {
						case 1:
							flag = info.buyer[info.info.buyer_id];
							break;
						case 2:
							flag = info.supplier[info.info.supplier_id];
							break;
						case 3:
							flag = info.direct_supply[info.info.supplier_id];
							break;
					}
				} catch (error) {
					console.log(error);
				}
				return flag;
			},
		},
	};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainos {
	.main_tile {
		.mainos_tile_r {
			color: $colour_red;
			font-size: $font_14;
		}
	}
	.newConBox.on {
		margin-left: -10px;
	}
	.main_table {
		/deep/.el-table--small td {
			padding-top: 0;
		}
		/deep/.el-form-item--small.el-form-item {
			margin-bottom: 16px;
			margin-top: 16px;
			margin-right: 0;
		}
	}
	.main_xqs {
		width: 55%;
		display: block;
		text-align: left;
		/deep/.el-input--small {
			width: 100%;
		}
	}
	.main_xq {
		ul {
			li {
				.main_xqi_i {
					position: relative;
					width: 120px;
					overflow: hidden;
					/deep/.el-upload-list__item-status-label {
						position: absolute;
						right: -15px;
						top: -6px;
						z-index: 91;
						width: 40px;
						height: 24px;
						background: #13ce66;
						text-align: center;
						-webkit-transform: rotate(45deg);
						transform: rotate(45deg);
						-webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
						box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
						display: block;
						i {
							font-size: $font_12;
							margin-top: 11px;
							color: $white;
							-webkit-transform: rotate(-45deg);
							transform: rotate(-45deg);
						}
					}
				}
				/deep/.el-image .el-image__inner {
					width: 120px;
					height: 120px;
					border: 1px solid #f8f8f9;
					margin-right: 20px;
				}
				/deep/.el-image .image-slot img {
					width: 120px;
					height: 120px;
					border: 1px solid #f8f8f9;
					margin-right: 20px;
				}
				.main_xqi {
					width: 80%;
					margin-left: 5px;
				}
				.main_upImg {
					/deep/ul {
						li {
							padding-left: 0;
						}
					}
					/deep/.el-upload-list--picture-card
						.el-upload-list__item:first-child {
						margin-left: 145px;
					}
				}
			}
		}
	}

	.mainor_pr {
		margin-left: 10px;
		margin-bottom: 10px;
	}
	.base_p {
		width: 80px;
	}
	.main_page_top {
		margin-top: 7px;
		margin-left: 10px;
		use {
			fill: $menuText;
		}
		&:hover {
			cursor: pointer;
			use {
				fill: $menuActiveText;
			}
		}
	}
}
</style>
